<!--  -->
<template>
  <div class="player-container">
    <!-- <iframe
      src="http://192.168.68.141/arcgis/rest/services/SampleWorldCities/MapServer?f=jsapi"
      class="w-100P h-100P"
      frameborder="0"
    ></iframe> -->
    <arcgis-map class="w-100P h-100P"></arcgis-map>
    <!-- <i class="el-icon-full-screen fz-30 full-screen-icon" @click="toggle" />

    <fullscreen ref="fullscreen" @change="fullscreenChange">
      <gd-map />
    </fullscreen> -->
  </div>
</template>

<script>
// import GdMap from '@/components/gd-map/index.vue'

import fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(fullscreen)
import ArcgisMap from './components/arcgis-map.vue'

export default {
  components: {
    // GdMap,
    ArcgisMap,
  },

  data() {
    return {
      isFullscreen: false,
    }
  },

  computed: {},

  methods: {
    toggle() {
      this.$refs['fullscreen'].toggle()
    },
    fullscreenChange(isFullscreen) {
      this.isFullscreen = isFullscreen
    },
  },
}
</script>
<style lang="scss" scoped>
.player-container {
  height: 100%;
}

.full-screen-icon {
  position: absolute;
  right: 25px;
  z-index: 13;

  &:hover {
    cursor: pointer;
  }
}

::v-deep .fullscreen {
  background: #fff !important;
}
</style>
